<template>
  <el-select
    @change="getPark"
    v-model="tanent"
    placeholder="请选择租户"
    size="small"
  >
    <el-option
      v-for="(item, index) in tanentOpts"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-select
    @change="changePark"
    class="mlr10"
    v-model="park"
    placeholder="请选择园区"
    size="small"
  >
    <el-option
      v-for="(item, index) in parkOpts"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-select v-model="facilities" placeholder="请选择设施" size="small">
    <el-option
      v-for="item in facilitiesOpts"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
// console.log(store,000)
const tanent = ref("");
const park = ref("");
const facilities = ref([]);
const tanentOpts = ref([]);
const parkOpts = ref([]);
const facilitiesOpts = ref([]);

store.dispatch('getTenantId')//引入数据
// 园区发生改变时
const changePark = () => {
  const index = parkOpts.value.findIndex((item) => item.value == park.value);
  getFaci(index);
 
};
// 根据选中的园区去获取相应的设施
const getFaci = (index = 0) => {
  facilities.value = "";
  facilitiesOpts.value = [];

  console.log(333);
  if (parkOpts.value[index]) {
    facilitiesOpts.value = parkOpts.value[index].children.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
    facilities.value = parkOpts.value[index].children[0].id;
  }
};
// 获取园区
const getPark = async () => {
  store.commit('setTenantId',tanent.value)
  park.value = "";
  parkOpts.value = [];
  facilities.value = "";
  facilitiesOpts.value = [];
  store.commit("setTenantId", tanent.value);
  store.dispatch("getPark");
};
// 监听租户的变化
watch(
  computed(() => store.state.tenantOpts),
  (e) => {
    if (e.length) {
      tanentOpts.value = store.state.tenantOpts;
      tanent.value = tanentOpts.value[0].value;
      getPark();
    }
  },
  {
    immediate: true,
  }
);
// 监听园区的变化
watch(
  computed(() => store.state.parkOpts),
  (e) => {
    parkOpts.value = e;
    park.value = e[0]?.label;
    store.commit("setParkId", e[0]?.value);
    getFaci(0);
  }
);
// 监听设施的变化
watch(facilities, (e) => store.commit("setFaci", e));
</script>

<style lang="scss" scoped></style>
